<!doctype html>
<html class="x-admin-sm">
<#include "../header.ftl">
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>角色名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="roleName" name="roleName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="add" lay-submit="" id="btnAdd">
                    增加
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;
        //自定义验证规则
        form.verify({
            roleName: function (value) {
                if (value.length < 2) {
                    return '至少得2个字符啊';
                }
            }
        });
        //监听提交
        form.on('submit(add)', function (data) {
            //$("#btnAdd").blur();
            $(this).blur();
            console.log(data);
            //发异步，把数据提交给php
            $.ajax({
                type: "POST",                      //请求类型
                url: "./roleEdit?v=save",                 //URL
                data: data.field,                  //传递的参数
                dataType: "json",                 //返回的数据类型
                async: false,//使用同步的方式,true为异步方式
                success: function (data) {          //data就是返回的json类型的数据
                    console.log(data);
                    layer.alert(data.msg, {icon: 6}, function () {
                        xadmin.father_reload();
                    });
                }
            });
            return false;
        });
    });
</script>
</body>
</html>